<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="theme-color" content="#ffffff">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>Web测试API</title>
  
  <!-- 网站图标 -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="favicon.svg">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#2563eb" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#7dd3fc" media="(prefers-color-scheme: dark)">
  
  <!-- 字体 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    /* CSS 变量定义 - 默认浅色主题 */
    :root {
      /* 间距变量 */
      --space-xs: 0.25rem;   /* 4px */
      --space-sm: 0.5rem;    /* 8px */
      --space-md: 1rem;      /* 16px */
      --space-lg: 1.5rem;    /* 24px */
      --space-xl: 2rem;      /* 32px */
      
      /* 字体和边框 */
      --border-radius: 0.375rem; /* 6px */
      --border-radius-lg: 0.5rem; /* 8px */
      --transition-speed: 0.2s;
      
      /* 浅色主题颜色 */
      --primary-color: #2563eb;       /* 主要按钮/链接颜色 */
      --primary-color-dark: #1d4ed8;  /* 主要按钮/链接悬停颜色 */
      --primary-color-rgb: 37, 99, 235; /* RGB格式主色调(用于透明度) */
      --background: #f8fafc;          /* 整体背景色 */
      --background-rgb: 248, 250, 252; /* RGB格式背景色 */
      --card-bg: #ffffff;             /* 卡片背景色 */
      --card-bg-rgb: 255, 255, 255;   /* RGB格式卡片背景色 */
      --text-color: #1e293b;          /* 主要文本颜色 */
      --text-color-light: #64748b;    /* 次要文本颜色 */
      --border-color: #e2e8f0;        /* 边框颜色 */
      --hover-color: #f1f5f9;         /* 悬停背景色 */
      --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
      --input-bg: #ffffff;            /* 输入框背景 */
      --bot-message-bg: #f1f5f9;      /* 机器人消息背景色 */
      --user-message-bg: #eff6ff;     /* 用户消息背景色 */
      
      /* 消息文本颜色 */
      --message-bot-text: #1e293b;    /* 机器人消息文本颜色 */
      --message-user-text: #ffffff;   /* 用户消息文本颜色 */
      
      /* 代码块样式 */
      --code-bg: #f1f5f9;             /* 代码块背景色 */
      --code-bg-dark: #0f172a;        /* 深色主题代码块背景 */
      
      /* 链接颜色 */
      --link-color: #2563eb;          /* 链接颜色 */
      --link-hover-color: #1d4ed8;    /* 链接悬停颜色 */
      --link-color-dark: #7dd3fc;     /* 深色主题链接颜色 */
      --link-hover-color-dark: #38bdf8; /* 深色主题链接悬停颜色 */
      --message-user-link: #e0f2fe;   /* 用户消息中链接颜色 */
      --message-user-link-hover: #ffffff; /* 用户消息中链接悬停颜色 */
    }
    
    /* 深色主题变量 */
    [data-theme="dark"] {
      --primary-color: #7dd3fc;       /* 主要按钮/链接颜色 */
      --primary-color-dark: #38bdf8;  /* 主要按钮/链接悬停颜色 */
      --primary-color-rgb: 125, 211, 252; /* RGB格式主色调 */
      --background: #0f172a;          /* 整体背景色 */
      --background-rgb: 15, 23, 42;   /* RGB格式背景色 */
      --card-bg: #1e293b;             /* 卡片背景色 */
      --card-bg-rgb: 30, 41, 59;      /* RGB格式卡片背景色 */
      --text-color: #f1f5f9;          /* 主要文本颜色 */
      --text-color-light: #94a3b8;    /* 次要文本颜色 */
      --border-color: #334155;        /* 边框颜色 */
      --hover-color: #334155;         /* 悬停背景色 */
      --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
      --input-bg: #1e293b;            /* 输入框背景 */
      --bot-message-bg: #1e293b;      /* 机器人消息背景色 */
      --user-message-bg: #1e40af;     /* 用户消息背景色 */
      
      /* 消息文本颜色 */
      --message-bot-text: #f1f5f9;    /* 机器人消息文本颜色 */
      --message-bot-text-dark: #f1f5f9; /* 深色主题下机器人消息文本颜色 */
      --message-bot-bg-dark: #1e293b;  /* 深色主题下机器人消息背景 */
    }

    /* CSS 基础重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background-color: var(--background);
      color: var(--text-color);
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: background-color var(--transition-speed) ease;
    }

    #root {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 5px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--border-color);
      border-radius: 6px;
      transition: background-color var(--transition-speed) ease;
    }
  </style>
</head>
<body>
  <div id="root">
    <!-- React将在这里渲染内容 -->
  </div>

  <!-- 更新入口脚本路径 -->
  <script type="module" src="/src/index.jsx"></script>
</body>
</html>
